<template>
  <div style="min-height: 600px">
    <leftRightSplit :left-span="4">
      <template #left>
        <ContentWrap title="受影响的部门">
          <el-tree
            ref="deptTree"
            :data="depts"
            :default-expand-all="true"
            :highlight-current="true"
            :props="props"
            style="height: 100%"
            :expand-on-click-node="false"
            v-model:current-node-key="chioseKey"
            node-key="Id"
            @current-change="chioseDept"
          >
            <template #default="{ node, data }">
              <span class="slot-t-node">
                <Icon v-if="data.style" :icon="data.style.icon" :color="data.style.color" />
                <span>{{ node.label }}</span>
              </span>
            </template>
          </el-tree>
        </ContentWrap>
      </template>
      <template #right>
        <ContentWrap :title="title">
          <template #extr>
            <BaseButton :disabled="loading" :icon="checkIcon" type="success" @click="toVoidDept()"
              >解散部门</BaseButton
            >
          </template>
          <Table
            :data="emps"
            :columns="columns"
            :pagination="paging"
            row-key="EmpId"
            @change="loadEmp"
          >
            <template #UserType="e">
              {{ HrUserType[e.row.UserType].text }}
            </template>
            <template #empBase="e">
              <div class="userInfo">
                <div class="head">
                  <img
                    v-if="e.row.UserHead == null || e.row.UserHead == ''"
                    src="@/assets/imgs/avatar.png"
                    width="50"
                    height="50"
                  />
                  <el-avatar
                    v-else
                    shape="square"
                    :size="50"
                    :src="$formatFileUri(e.row.UserHead)"
                  />
                </div>
                <div class="content">
                  <div class="item">
                    <Icon v-if="e.row.Sex == 1" style="color: #409eff" icon="ep:male" />
                    <Icon v-else-if="e.row.Sex == 2" style="color: #f56c6c" icon="ep:female" />
                    <el-link @click="showEmp(e.row)">{{ e.row.EmpName }}</el-link>
                  </div>
                  <div class="empNo">{{ e.row.EmpNo }}</div>
                </div>
              </div>
            </template>
            <template #post="e">
              <el-space v-if="e.row.Post">
                <span v-for="(t, index) in e.row.Post" :key="index">
                  {{ t }}
                </span>
              </el-space>
            </template>
            <template #unit="e">
              {{ e.row.UnitName + ' ' + e.row.DeptName }}
            </template>
            <template #status="e">
              <el-switch
                v-model="e.row.Status"
                :inactive-value="2"
                :active-value="1"
                @change="(val) => setStatus(e.row, val)"
              />
            </template>
            <template #empTitle="e">
              <el-space v-if="e.row.Title">
                <span v-for="(t, index) in e.row.Title" :key="index">
                  {{ t }}
                </span>
              </el-space>
            </template>
            <template #action="e">
              <BaseButton
                size="small"
                type="default"
                title="人员调任"
                :icon="shareIcon"
                circle
                @click="editEmpEntry(e.row)"
              />
            </template>
          </Table>
        </ContentWrap>
      </template>
    </leftRightSplit>
    <editEmpEntry :emp="emp" :is-retain-title="false" :visible="entryVisible" @close="closeEntry" />
  </div>
</template>

<script>
import * as empApi from '@/api/emp/emp'
import { HrUserType } from '@/config/publicDic'
import { ToVoid } from '@/api/unit/dept'
import { GetDept, QueryEmp } from '@/api/base/depChange'
import editEmpEntry from '@/views/emp/components/editEmpEntry.vue'
import { useIcon } from '@/hooks/web/useIcon'
import { Table } from '@/components/Table'
import { useUserStoreWithOut } from '@/store/modules/user'
const userStore = useUserStoreWithOut()
export default {
  components: {
    editEmpEntry,
    Table
  },
  props: {
    deptId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      HrUserType,
      checkIcon: useIcon({ icon: 'ep:check' }),
      shareIcon: useIcon({ icon: 'ep:share' }),
      depts: [],
      emps: [],
      emp: null,
      empId: null,
      paging: {
        pageSize: 10,
        total: 0,
        currentPage: 1
      },
      loading: false,
      entryVisible: false,
      chioseKey: null,
      label: null,
      props: {
        label: 'title',
        children: 'Children'
      },
      columns: [
        {
          field: 'EmpNo',
          label: '人员信息',
          align: 'left',
          width: 250,
          fixed: 'left',
          slotName: 'empBase',
          sortable: 'custom'
        },
        {
          field: 'Unit',
          label: '单位部门',
          align: 'center',
          slotName: 'unit',
          minWidth: 180
        },
        {
          field: 'Post',
          label: '当前岗位',
          align: 'center',
          slotName: 'post',
          minWidth: 200
        },
        {
          field: 'DeptTitle',
          label: '当前职务',
          align: 'center',
          slotName: 'empTitle',
          minWidth: 150
        },
        {
          field: 'Phone',
          label: '手机号',
          align: 'center',
          width: 110,
          sortable: 'custom'
        },
        {
          field: 'UserType',
          label: '人员类型',
          align: 'center',
          sortable: 'custom',
          slotName: 'UserType',
          minWidth: 110
        },
        {
          field: 'Status',
          label: '用户状态',
          align: 'center',
          slotName: 'status',
          minWidth: 120,
          sortable: 'custom'
        },
        {
          field: 'Action',
          label: '操作',
          align: 'left',
          fixed: 'right',
          width: '120px',
          slotName: 'action'
        }
      ]
    }
  },
  computed: {
    comId() {
      return userStore.comId
    }
  },
  watch: {
    deptId: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    async toVoidDept() {
      this.loading = true
      await ToVoid(this.deptId)
      this.$message({
        type: 'success',
        message: '解散成功!'
      })
      this.$emit('complete')
      this.loading = false
    },
    closeEntry(isRefresh) {
      this.entryVisible = false
      if (isRefresh) {
        this.reset()
      }
    },
    editEmpEntry(emp) {
      this.emp = emp
      this.entryVisible = true
    },
    chioseDept(data) {
      this.title = data.DeptName + '受影响的员工'
      this.loadEmp()
    },
    async reset() {
      this.paging.Index = 1
      const res = await GetDept(this.deptId, false)
      if (res != null) {
        this.format(res)
        this.depts = [res]
        this.chioseKey = res.Id
        this.title = res.DeptName + '受影响的员工'
        this.loadEmp()
      } else {
        this.depts = []
      }
    },
    async setStatus(row, status) {
      await empApi.setStatus(row.EmpId, status)
      row.Status = status
    },
    async loadEmp(curPaging) {
      if (curPaging == null) {
        curPaging = {
          Size: this.paging.pageSize,
          Index: 1,
          SortName: 'EmpId',
          IsDesc: true
        }
        this.paging.currentPage = 1
      }
      const res = await QueryEmp(
        {
          CompanyId: this.comId,
          DeptId: this.chioseKey
        },
        curPaging
      )
      if (res.List) {
        this.emps = res.List
      } else {
        this.emps = []
      }
      this.paging.total = res.Count
    },
    format(data) {
      data.title = data.DeptName + '(' + data.EmpNum + ')'
      if (data.IsUnit) {
        data.style = {
          icon: 'tree-table',
          color: '#409eff'
        }
      } else {
        data.style = {
          icon: 'peoples',
          color: '#000'
        }
      }
      if (data.Children && data.Children.length > 0) {
        data.Children.forEach((c) => {
          this.format(c)
        })
      }
    }
  }
}
</script>
